<template>
  <div class="body">
    <!-- 头部 -->
    <header>
      <!-- 导航栏开始 -->
      <van-nav-bar
        left-text="ele.me"
        fixed
        placeholder
        @click-left="$router.push('/home')"
      >
        <!--
              fixed	是否固定在顶部
              placeholder 固定在顶部时，是否在标签位置生成一个等高的占位元素
            -->
        <template #right>
          <van-icon
            name="contact"
            size="18"
            @click.native="$router.push({ path: '/profile' })"
          />
        </template>
      </van-nav-bar>
      <!--导航栏结束  -->
      <!-- 当前定位城市开始 -->
      <!-- 头部开始 -->
      <div class="city_nav">
        <!-- 左 -->
        <span class="left">当前定位城市:</span>
        <!-- 右 -->
        <span class="right">定位不准时,请在城市列表中选择</span>
      </div>
      <!-- 头部结束 -->
      <!-- 内容开始 -->
      <div class="city_content" @click="locationCityFn(locationCity.id)">
        <!-- 左 -->
        <span class="left">{{ locationCity.name }}</span>
        <!-- 右 -->
        <span class="right">
          <van-icon name="arrow" />
        </span>
      </div>
      <!-- 内容结束 -->
      <!-- 当前定位城市结束 -->
    </header>

    <!-- 热门城市板块 -->
    <!-- 热门城市开始 -->
    <div class="hotCity">
      <h4 class="h">热门城市</h4>
      <!-- 热门城市 -->
      <ul class="hotCity_content table">
        <li
          v-for="item in hotCity"
          :key="item.area_code"
          @click="hotCityFn(item.id)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <!-- 热门城市结束 -->

    <!-- 全部城市板块 -->
    <!-- 循环拿出首字母 -->
    <div class="allCity" v-for="(item, index) in cityFword" :key="index">
      <h4 class="h">
        <span>{{ item }}</span>
        <!-- 只有首字母为A时才显示 -->
        <span v-show="item == 'A'">(按字母排序)</span>
      </h4>
      <ul class="table">
        <!-- 循环拿出城市 -->
        <li
          v-for="(cities, index) in allCity[item]"
          :key="index"
          @click="allCityFn(cities.id)"
        >
          {{ cities.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 引入请求城市列表接口
import { City } from "@/api/homeCity";
export default {
  data() {
    return {
      hotCity: [], //热门城市
      allCity: [], //全部城市
      locationCity: [], //定位城市
      cityFword: [], //首字母
    };
  },

  created() {
    // 请求热门城市
    City({ type: "hot" }).then((res) => {
      console.log("热门城市", res);
      this.hotCity = res.data;
    });
    //请求全部城市
    City({ type: "group" }).then((res) => {
      console.log("全部城市", res);
      this.allCity = res.data;
      //取出首字母，对首字母进行排序
      //   将赋值的城市遍历一次,取出首字母,再赋值到新变量cityFword上
      for (let i in this.allCity) {
        this.cityFword.push(i);
        // 对字母进行排序并赋值
        this.cityFword.sort();
      }
    });

    //   请求当前定位城市
    City({ type: "guess" }).then((res) => {
      console.log("当前定位城市", res);
      this.locationCity = res.data;
    });
  },

  methods: {
    //封装城市带id跳转函数
    toSearchCity(id) {
      this.$router.push({
        path: "/city",
        query: { id },
      });
    },

    //热门城市带id跳转到搜索页面
    hotCityFn(id) {
      this.toSearchCity(id);
    },
    //全部城市带id跳转到搜索页面
    allCityFn(id) {
      this.toSearchCity(id);
    },
    //当前定位城市城市带id跳转到搜索页面
    locationCityFn(id) {
      this.toSearchCity(id);
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.body {
  background-color: #f5f5f5;
}
header {
  background-color: #fff;
}
// 表格公共样式
.table {
  box-sizing: content-box;
  display: flex;
  flex-wrap: wrap;
  li {
    background-color: #fff;
    box-sizing: border-box;
    border: 1px solid #e4e4e4;
    width: 25%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 15px;
    // 文本超出处理
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
// 表格标题公共样式
.h {
  background-color: #fff;
  font-weight: 400;
  font-size: 15px;
  padding-left: 10px;
  height: 45px;
  line-height: 45px;
  color: #666;
  border-top: 2px solid #e4e4e4;
  margin-top: 10px;
  & > span:nth-child(2) {
    font-size: 10px;
    margin-left: 10px;
  }
}

// 导航栏
/deep/.van-nav-bar {
  background-color: #3190e8;
  .van-nav-bar__left,
  .van-nav-bar__text,
  .van-icon {
    color: #fff;
  }
}

// 当前定位城市
// 头部
.city_nav {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e4e4e4;
  .left {
    font-size: 15px;
    color: #666;
  }
  .right {
    font-size: 10px;
    font-weight: 900;
    color: #9f9f9f;
  }
}
// 内容
.city_content {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e4e4e4;
  //   左
  .left {
    font-size: 18px;
    color: #3190e8;
  }
  //   右
  .right {
    color: #9f9f9f;
  }
}

//热门城市
.hotCity_content {
  color: #3190e8;
}
</style>